<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/vue/vue.min.js"></script>
    <script src="/js/jquery/jquery.js"></script>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="s in spots">
            <h1>{{s.subTitle}}</h1>
            <a class="photo" data-cs-p="相册" href="/photo/poi/25091.html" target="_blank">
                <div class="bd">
                <div class="pic-big"><img src="http://b1-q.mafengwo.net/s16/M00/0F/4A/CoUBUl6QH0GANcoxABqx8VVM-Jc601.png?imageMogr2%2Fthumbnail%2F%21690x370r%2Fgravity%2FCenter%2Fcrop%2F%21690x370%2Fquality%2F100" width="690" height="370"/></div>
                <div class="pic-small"><img src="http://p1-q.mafengwo.net/s11/M00/B1/BB/wKgBEFxX6kGAS_p5ABI4Eej-cc062.jpeg?imageMogr2%2Fthumbnail%2F%21305x183r%2Fgravity%2FCenter%2Fcrop%2F%21305x183%2Fquality%2F100" width="305" height="183"/></div>
                <div class="pic-small"><img src="http://n1-q.mafengwo.net/s15/M00/EB/E2/CoUBGV5L9uuALOU7AAF-czl4FRQ428.jpg?imageMogr2%2Fthumbnail%2F%21305x183r%2Fgravity%2FCenter%2Fcrop%2F%21305x183%2Fquality%2F100" width="305" height="183"/></div>
                <span>44065张图片</span>
                </div>
            </a>
            <h5>{{s.title}}</h5>
            <h6>电话:{{s.phone}}</h6>
            <h6>网址:<a>{{s.website}}</a></h6>
            <h6>用时参考:{{s.referenceTime}}</h6>
            <h6>交通:{{s.traffic}}</h6>
            <h6>门票:{{s.ticket}}</h6>
            <h6>开放时间:{{s.openingHours}}</h6>
        </li>
    </ul>
</div>
<script>
    var vue = new Vue({
        el:"#app",
        data:{
            spots:[]
        },
        mounted:function () {
            //加载spots这个列表数据
            var url = "http://localhost:8080/spots/list"
            $.get(url,function (data) {
                vue.spots=data;
            })
        }
    })
</script>
</body>



</html>